<template>
  <view class="my page flex-col container">
    <div class="header items-center">
      <div class="left">
        <img
          :src="userInfo.avatar || defaultIcon"
          alt=""
          class="avatar"
          mode="aspectFit"
        />
        <button
          class="btn"
          openType="getPhoneNumber"
          v-if="$env === 'weapp' && !isRegister"
          @GetPhoneNumber="getPhoneNumber"
          scope="phoneNumber"
        ></button>
        <button
          class="btn"
          open-type="getAuthorize"
          @GetAuthorize="onGetAuthorize"
          scope="phoneNumber"
          v-if="$env === 'alipay' && !isRegister"
        ></button>
        <button
          class="btn"
          open-type="getPhoneNumber"
          @getPhoneNumber="getTTphoneNumber"
          scope="phoneNumber"
          v-if="$env === 'tt' && !isRegister"
        ></button>
      </div>
      <div class="info">
        <span class="name" v-if="!isLogin">{{
          userInfo.nickName | changeName(userInfo.telephone)
        }}</span>
        <!-- <div class="login" v-if="!isLogin"> -->
        <div class="login">
          <span>登录 / 注册</span>
          <button
            class="btn"
            openType="getPhoneNumber"
            v-if="$env === 'weapp' && !isRegister"
            @GetPhoneNumber="getPhoneNumber"
            scope="phoneNumber"
          ></button>
          <button
            class="btn"
            open-type="getAuthorize"
            @GetAuthorize="onGetAuthorize"
            scope="phoneNumber"
            v-if="$env === 'alipay' && !isRegister"
          ></button>
          <button
            class="btn"
            open-type="getPhoneNumber"
            @getPhoneNumber="getTTphoneNumber"
            scope="phoneNumber"
            v-if="$env === 'tt' && !isRegister"
          ></button>
        </div>
      </div>
      <div class="auth justify-center items-center">
        <view class="zero justify-center items-center" @tap="handleSetup">
          <!-- <image src="../../static/icones/my8.png"></image> -->
          <img src="../../static/icones/my4.png" alt="" class="auth-icon" />
        </view>
        <!-- <span v-if="isLogin" @tap="goAuth">认证信息</span> -->
      </div>
    </div>
    <div class="menber">
      <div class="menber-lf">
        <div class="lf-lf">
          <img src="../../static/icones/my2.png" alt="" />
        </div>
        <div class="lf-ri">
          <div class="lf-title">免费开通会员卡</div>
          <div class="ri-title">领专属优惠券</div>
        </div>
      </div>
      <div class="menber-ri">
        <img src="../../static/icones/my5.png" alt="" />
      </div>
    </div>
    <!-- <div class="list order flex-col bg-white" v-if="$checkStatus === '0'"> -->
    <div class="list order flex-col bg-white">
      <div class="justify-between title">
        <span class="name">全部订单</span>
        <navigator :url="'/pages/orderList/index'">
          <view class="more">查看更多 ></view>
        </navigator>
      </div>
      <div class="content justify-around">
        <div class="item" @tap="goOrder(1)">
          <img
            src="../../static/icones/order1.png"
            alt=""
            class="icon"
            mode="widthFix"
          />
          <span class="text">待付款</span>
        </div>
        <div class="item" @tap="goOrder(2)">
          <img
            src="../../static/icones/order2.png"
            alt=""
            class="icon"
            mode="widthFix"
          />
          <span class="text">待发货</span>
        </div>
        <div class="item" @tap="goOrder(3)">
          <img
            src="../../static/icones/order3.png"
            alt=""
            class="icon"
            mode="widthFix"
          />
          <span class="text">已发货</span>
        </div>
        <div class="item" @tap="goOrder(5)">
          <img
            src="../../static/icones/order4.png"
            alt=""
            class="icon"
            mode="widthFix"
          />
          <span class="text">待归还</span>
        </div>
      </div>
    </div>

    <div class="list service flex-col bg-white">
      <div class="justify-between title">
        <span class="name">我的服务</span>
      </div>
      <div class="content flex">
        <div class="item flex-col" @tap="goMyAction">
          <img
            src="../../static/icones/serve1.png"
            alt=""
            class="icon"
            mode="aspectFit"
          />
          <span class="text">我要买断</span>
        </div>
        <div class="item flex-col" @tap="goMyActions">
          <img
            src="../../static/icones/serve2.png"
            alt=""
            class="icon"
            mode="aspectFit"
          />
          <span class="text">我要续租</span>
        </div>
        <div class="item flex-col" @tap="goMyQuan">
          <img
            src="../../static/icones/serve3.png"
            alt=""
            class="icon"
            mode="aspectFit"
          />
          <span class="text">我的优惠券</span>
        </div>
        <div class="item flex-col" @tap="goQuan">
          <img
            src="../../static/icones/serve4.png"
            alt=""
            class="icon"
            mode="aspectFit"
          />
          <span class="text">领券中心</span>
        </div>
        <div class="item flex-col" @tap="goMyAddress">
          <img
            src="../../static/icones/serve5.png"
            alt=""
            class="icon"
            mode="aspectFit"
          />
          <span class="text">企业租用</span>
        </div>

        <div class="item flex-col" @tap="goMyStar">
          <img
            src="../../static/icones/serve6.png"
            alt=""
            class="icon"
            mode="aspectFit"
          />
          <span class="text">我的收藏</span>
        </div>
        <div class="item flex-col" @tap="goMyAssess">
          <img
            src="../../static/icones/serve7.png"
            alt=""
            class="icon"
            mode="aspectFit"
          />
          <span class="text">我的评价</span>
        </div>
        <div class="item flex-col" @tap="showServer = true">
          <img
            src="../../static/icones/serve8.png"
            alt=""
            class="icon"
            mode="aspectFit"
          />
          <span class="text">投诉建议</span>
        </div>
        <!-- <div class="item flex-col" @tap="goJoin">
          <img src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/my/shangjiaruzhu.png" alt="" class="icon" mode="aspectFit">
          <span class="text">商家入驻</span>
        </div> -->
        <!-- <div class="item flex-col" @tap="handlee()">
          <img src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/my/guanyupingtai.png" alt="" class="icon" mode="aspectFit">
          <span class="text">关于平台11</span>
        </div> -->
        <!-- <get-coupon  @get-coupon-success="onGetCouponSuccess" @onUseImmediately="onUseImmediately"
     @get-coupon-fail="onGetCouponFail()" @close="onClose()" :params="params" :zIndex="4"
     :dialogBtnType="dialogBtnType" extraData="111">
     <div class="item flex-col">
      <img src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/my/guanyupingtai.png" alt="" class="icon" mode="aspectFit">
      <span class="text">领取优惠券</span>
     </div>
    </get-coupon> -->
      </div>
    </div>
    <div class="banners" v-if="isShow === 1">
      <get-coupon
        onGetCouponSuccess="onGetCouponSuccess"
        onGetCouponFail="onGetCouponFail"
        onUseImmediately="onUseImmediately"
        onClose="onClose"
        :params="params"
        :zIndex="4"
        :dialogBtnType="dialogBtnType"
        extraData="111"
      >
        <div class="item flex-col img-pic">
          <img :src="pic" alt="" class="icon pic" mode="aspectFit" />
          <!-- <span class="text">领取优惠券</span> -->
        </div>
      </get-coupon>
    </div>

    <!-- 客服弹窗 -->
    <!-- <ServerDialog v-model="showServer" :platformTelephone.sync="$orgPhone" /> -->
  </view>
</template>

<script>
// import Taro from "@tarojs/taro";
import styles from "./index.scss";
// import Login from "@utils/login";
// import ServerDialog from "@components/serverDialog";

export default {
  // components: { ServerDialog },
  data() {
    return {
      data: {
        page: 1,
        size: 10,
        sessionId: "",
        finish: false,
      },
      params: [],
      senderMerchantId: "2021002110607982",
      dialogBtnType: 1,
      drawer: false,
      direction: "rtl",
      styles,
      userInfo: {
        nickName: "",
        avatar: "",
        telephone: "",
      },
      isShow: "",
      pic: "",
      isRegister: true,
      isLogin: true,
      showServer: false,
      phone: {
        platformTelephone: null,
      },
      defaultIcon: "../../static/icones/my1.png",
    };
  },
  created() {
    this.getListes();
    this.getHongList();
  },
  // onLoad() {
  //   setTimeout(() => {
  //     this.$scope.onGetCouponSuccess = this.onGetCouponSuccess.bind(this);
  //     this.$scope.onGetCouponFail = this.onGetCouponFail.bind(this);
  //     this.$scope.onClose = this.onClose.bind(this);
  //   }, 100);
  // },
  mounted() {},

  onShow() {
    // const nickName = this.$taro.getStorageSync("nickName");
    // if (
    //   this.$taro.getStorageSync("sessionId") &&
    //   (nickName === "null" || nickName === "")
    // ) {
    //   this.$taro
    //     .showModal({
    //       title: "提示",
    //       content: "还没完善信息呢",
    //       cancelText: "再等等",
    //       confirmText: "立即完善",
    //       confirmColor: "#37A9FF",
    //     })
    //     .then(({ confirm }) => {
    //       if (confirm) {
    //         Login.setUserInfo().then(() => {
    //           this.userInfo.nickName = this.$taro.getStorageSync("nickName");
    //           this.userInfo.avatar = this.$taro.getStorageSync("avatar");
    //         });
    //       }
    //     });
    // }
  },
  filters: {
    changeName(name, telephone) {
      // if (!Taro.getStorageSync("sessionId")) {
      //   return "未登录";
      // }
      // return name === "null" || name === "" ? telephone : name;
    },
  },

  mounted() {
    // const sessionId = this.$taro.getStorageSync("sessionId");
    // if (sessionId) {
    //   // const avatar = this.$taro.getStorageSync("avatar");
    //   // this.userInfo.nickName = this.$taro.getStorageSync("nickName");
    //   this.userInfo.avatar = avatar === "null" ? "" : avatar;
    //   this.userInfo.telephone = this.$taro.getStorageSync("telephone");
    // } else {
    //   this.login();
    // }
  },
  methods: {
    handleSetup() {
      uni.navigateTo({ url: "/pagesMy/mySetup/index" });
    },
    goMyStar() {
      uni.navigateTo({ url: "/pagesMy/myStar/index" });
    },
    goMyAssess() {
      uni.navigateTo({ url: "/pagesMy/myAssess/index" });
    },
    goMyAction() {
      uni.navigateTo({ url: "/pagesMy/myAction/index" });
    },
    goMyActions() {
      uni.navigateTo({ url: "/pagesMy/myActions/index" });
    },
    goQuan() {
      uni.navigateTo({ url: "/pagesIndex/quanList/index" });
    },
    goMyQuan() {
      uni.navigateTo({ url: "/pagesMy/myQuan/index" });
    },
    getListes() {
      // this.$http
      //   .request(
      //     {
      //       url: "/user/getShopCouponShow.json",
      //     },
      //     false
      //   )
      //   .then((res) => {
      //     this.pic = res.data.pic;
      //     this.isShow = res.data.isShow;
      //     console.log(res, this.pic, this.isShow, "111111111111111111");
      //   });
    },
    async getHongList() {
      // this.data.sessionId = this.$taro.getStorageSync("sessionId");
      // const paramss = {
      //   pageNumber: this.data.page,
      //   pageSize: this.data.size,
      //   type: 3,
      //   isUsed: 3,
      //   sessionId: this.data.sessionId,
      // };
      // this.$http
      //   .request(
      //     {
      //       url: "/index/couponList.json",
      //       data: paramss,
      //     },
      //     false
      //   )
      //   .then((res) => {
      //     this.params = res.data.map((item) => ({
      //       activityId: item.id,
      //       outBizNo: item.outBizNo,
      //       voucherCode: item.voucherCode,
      //     }));
      //     if (this.params) {
      //       this.isShow = 0;
      //       console.log(
      //         res,
      //         res.data.map((item) => ({
      //           activityId: item.id,
      //           outBizNo: item.outBizNo,
      //           voucherCode: item.voucherCode,
      //         })),
      //         "254"
      //       );
      //     }
      //   });
    },
    handleOn() {
      console.log("卡片被点击了");
    },
    onGetCouponSuccess() {
      console.log("触发了 onGetCouponSuccess 事件");
      // console.log("成功返回结果: ", resultList);
    },
    onGetCouponFail(result, { extraData }) {
      console.log("触发了 onGetCouponFail 事件");
      console.log("失败返回结果: ", result);
    },
    onUseImmediately(event, { extraData }) {
      console.log("触发了 onUseImmediately 事件");

      // 可以跳转到自定义的页面
      // my.navigateTo({
      //   url: "/pages/goods-detail/index"
      // });
    },
    onClose() {
      console.log("触发了 onClose 事件");
    },
    handlee() {
      this.drawer = true;
      console.log("999999999999");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    login() {
      // if (this.userInfo.sessionId) {
      //   return;
      // } else {
      //   Login.login().then(({ isRegister, data }) => {
      //     this.isRegister = isRegister;
      //     this.isLogin = this.isRegister;
      //     if (data && data.appLoginUser) {
      //       const { avatar, nickname, telephone, sessionId } =
      //         data.appLoginUser;
      //       this.userInfo.nickName = nickname;
      //       this.userInfo.avatar = avatar === "null" ? "" : avatar;
      //       this.userInfo.telephone = telephone;
      //       this.userInfo.sessionId = sessionId;
      //       Login.setUserStorage(data);
      //       // if (nickname === "null") {
      //       //   this.$taro
      //       //     .showModal({
      //       //       title: "提示",
      //       //       content: "还没完善信息呢",
      //       //       cancelText: "再等等",
      //       //       confirmText: "立即完善",
      //       //       confirmColor: "#37A9FF",
      //       //     })
      //       //     .then(({ confirm }) => {
      //       //       if (confirm) {
      //       //         Login.setUserInfo().then(() => {
      //       //           this.userInfo.nickName =
      //       //             this.$taro.getStorageSync("nickName");
      //       //           this.userInfo.avatar =
      //       //             this.$taro.getStorageSync("avatar");
      //       //         });
      //       //       } else {
      //       //         this.$taro.showTabBarRedDot({
      //       //           index: 3,
      //       //         });
      //       //       }
      //       //     });
      //       // }
      //     }
      //   });
      // }
    },
    onGetAuthorize() {
      // 支付宝允许获取手机号码
      // this.$taro.getPhoneNumber({
      //   success: ({ response }) => {
      //     Login.toLogin({ encryptedData: response }).then(() => {
      //       const avatar = this.$taro.getStorageSync("avatar");
      //       this.userInfo.nickName = this.$taro.getStorageSync("nickName");
      //       this.userInfo.avatar = avatar === "null" ? "" : avatar;
      //       this.isRegister = true;
      //       this.isLogin = true;
      //     });
      //   },
      //   fail: (res) => {
      //     console.log("getPhoneNumber_fail");
      //   },
      // });
    },
    getPhoneNumber(e) {
      // 微信获取手机号码
      Login.toLogin(e.detail).then(() => {
        // const avatar = this.$taro.getStorageSync("avatar");
        // this.userInfo.nickName = this.$taro.getStorageSync("nickName");
        // this.userInfo.avatar = avatar === "null" ? "" : avatar;
        // this.isRegister = true;
        // this.isLogin = true;
      });
    },
    getTTphoneNumber(e) {
      // console.log(e.detail);
      // Login.toLogin(e.detail).then(() => {
      //   const avatar = this.$taro.getStorageSync("avatar");
      //   this.userInfo.nickName = this.$taro.getStorageSync("nickName");
      //   this.userInfo.avatar = avatar === "null" ? "" : avatar;
      //   this.isRegister = true;
      //   this.isLogin = true;
      // });
    },
    //我的订单
    goOrder(status) {
      console.log(status, "lllll");
      this.$router.push({
        path: "/pages/orderList/index",
        query: { status: status },
      });
      // this.$router.push("`/pages/orderList/index?status=${status}`");
      // this.$taro.setStorageSync('orderStatus', status)
      // this.$nextTick(() => {
      //   this.$goPage('/pages/orderList/index')
      // })
    },

    goMyAddress() {
      this.$goPage("/pagesMy/myAddress/index", true);
    },
    goFeedback() {
      this.$goPage("/pagesMy/feedback/index", true);
    },

    goAuth() {
      this.$goPage("/pagesMy/auth/index", true);
    },

    goOrderStatus() {
      this.$goPage("/pagesMy/orderStatus/index", true);
    },

    goAboutUs() {
      this.$goPage("/pagesMy/aboutUs/index", true);
    },
    goJoin() {
      this.$goPage("/pagesIndex/companyLease/index");
    },
  },
};
</script>
<style lang="scss">
.banners {
  width: 100%;
  height: 74px;
  border-radius: 16px;
  // background-color: rgb(233, 18, 18);
  margin-top: 16px;
}
.img-pic {
  width: 100%;
  height: 74px;
  .img {
    display: inline-block;
    width: 686px;
    height: 148px;
    // border-radius: 16px;
    // object-fit: fill;
  }
}
.pic {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  // padding-left: 50px;
}
.text-num {
  font-size: 10px;
  color: #8666f7;
}
</style>
